<!Doctype html>
<html xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="utf-8"/>
    <title>课程列表</title>
    <link th:href="@{bootstrap/css/bootstrap.min.css}" rel="stylesheet" />
    <link th:href="@{bootstrap/css/bootstrap-theme.min.css}" rel="stylesheet" />
    <link rel="shortcut icon"  href="favicon.ico">
    <script th:src="@{jquery-3.1.1.js}" type="text/javascript"></script>
    <script th:src="@{jquery.validate.js}" type="text/javascript"></script>
    <script th:src="@{messages_zh.js}"></script>
    <script th:src="@{bootstrap/js/bootstrap.min.js}"></script>

    <style>
        :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color: gray; opacity:1;
        }

        ::-moz-placeholder { /* Mozilla Firefox 19+ */
            color:gray;opacity:1;
        }

        input:-ms-input-placeholder{
            color: gray;opacity:1;
        }

        input::-webkit-input-placeholder{
            color: gray;opacity:1;
        }

        input::-webkit-input-placeholder { /* WebKit browsers*/
            　　color:#999;font-size:18px;font-weight: bold;
            　　}
        input:-moz-placeholder {  /* Mozilla Firefox 4 to 18*/
            　　color:#999;font-size:18px;font-weight: bold;
            　　}
        input::-moz-placeholder {  /* Mozilla Firefox 19+*/
            　　color:#999;font-size:18px;font-weight: bold;
            　　}
        input:-ms-input-placeholder { /* Internet Explorer 10+*/
            　　color:#999;font-size:18px;font-weight: bold;
    </style>

    <style type="text/css">
         body{
         background-color: rgba(216,216,216,0.81);
         }
         .search{
             margin: 20px auto 10px;
             width: 60%;
             height: 60px;
         }
        .show{
            width:270px;
            height: 200px;
            margin: 5px 15px 10px 0;
            color: black;
            float: left;
            background-image: url(course.jpg);
        }
        .title{
            position:relative;
            top:10px;
            text-align: center;
            font-family: Monaco;
            font-size: 20px;
        }
        .content{
            position:relative;
            margin: 7px 0 0 0;
            text-align: left;
            font-family: Monaco;
            font-size: large
        }

         .foot a:link { color: #28a4c9;font-size: 20px;}		/* 未被访问的链接 */
         .foot a:hover {color: #66afe9}	/* 鼠标指针移动到链接上 */
    </style>

    <script>
        $(function(){
            $("#banner li a:not(#drop)").mouseover(function(){
                $(this).css("color","black");
            });
        });
        $(function(){
            $("#banner li a:not(#drop)").mouseout(function(){
                $(this).css("color","white");
            });
        });
        $(function() {
            $(".show").mouseover(function () {
                //让当前得到焦点的文本框改变其背景色
                $(this).css("box-shadow", " 3px 3px 3px #888888 ");
                $(this).css("position","relative");
                $(this).css("top","-1px");
            });

            $(".show").mouseout(function () {
                //让当前得到焦点的文本框改变其背景色
                $(this).css("box-shadow", " 0 0");
                $(this).css("position","relative");
                $(this).css("top","1px");
            });
        });
    </script>
</head>





<body>


<div class="container">
    <th:block th:include="/index :: header"></th:block>

    <form method="get" th:action="@{/Search}">
    <div class="input-group input-group-lg search">
        <input type="text" class="form-control" placeholder="输入课程名/授课老师查询" name="param" style="color: #9d9d9d;height: 60px">
        <span class="input-group-btn" >
            <button class="btn btn-default" type="submit" style="color: black;font-family: Monaco;height: 60px">Search</button>
        </span>
    </div>
    </form>
    <div th:if="${not #lists.isEmpty(page)}" >

        <div th:each="course : ${page.content}" class="show">
            <a th:href="@{/ShowCourse(ID=${course.courseID},page=${page.number})}">
            <div th:text="${course.courseName}" class="title"></div>
            </a>
            <div style="margin:7px 0 0 0;padding: 1px;width: 270px;height: 150px">
            <div><span class="glyphicon glyphicon-th" style="color: rgb(0,0,0);"></span>
            <span th:text=" '课程号: '+${course.courseID}" class="content"></span></div>
            <div><span class="glyphicon glyphicon-user" style="color: rgb(0, 0, 0);"></span>
            <span th:text=" '授课老师: '+${course.tname}" class="content"></span></div>
            <div><span class="glyphicon glyphicon-time" style="color: rgb(0, 0, 0);"></span>
            <span th:text=" '课时: '+${course.period}" class="content"></span></div>
            </div>
        </div>

        <div style="clear: both">
            <ul class="pagination" data-th-if="${page.totalPages gt 7}" >
                <!-- 上一页 -->
                <li class="page-item" data-th-classappend="${page.first} ? 'disabled' : ''" data-th-if="${page.number} eq 0 ">
                    <a th:href="@{/Courses(pageNum=0)}" class="page-link" aria-label="Previous">
                        <span aria-hidden="true">«</span>
                    </a>
                </li>

                <li class="page-item" data-th-classappend="${page.first} ? 'disabled' : ''" data-th-if="${page.number} gt 0 ">
                    <a th:href="@{/Courses(pageNum=${page.number - 1})}" class="page-link" aria-label="Previous">
                        <span aria-hidden="true">«</span>
                    </a>
                </li>
                <!-- 首页 -->
                <li class="page-item" data-th-classappend="${(page.number + 1) eq 1} ? 'active' : ''" >
                    <a th:href="@{/Courses(pageNum=0)}" class="page-link" >1</a>
                </li>


                <!-- 当前页面小于等于4 -->
                <li class="page-item" data-th-if="${(page.number + 1) le 4}" data-th-each="i : ${#numbers.sequence(2,5)}"
                    data-th-classappend="${(page.number + 1) eq i} ? 'active' : ''" >
                    <a class="page-link" th:href="@{/Courses(pageNum=${i} - 1)}" >
                        <span data-th-text="${i}"></span>
                    </a>
                </li>

                <li class="page-item disabled" data-th-if="${(page.number + 1) le 4}">
                    <a href="javascript:void(0);" class="page-link">
                        <span aria-hidden="true">...</span>
                    </a>
                </li>

                <!-- 最后一页与当前页面之差，小于等于3 -->
                <li class="page-item disabled" data-th-if="${(page.totalPages - (page.number + 1)) le 3}">
                    <a href="javascript:void(0);" class="page-link">
                        <span aria-hidden="true">...</span>
                    </a>
                </li>
                <li class="page-item" data-th-if="${(page.totalPages - (page.number + 1)) le 3}" data-th-each="i : ${#numbers.sequence(page.totalPages - 4, page.totalPages - 1)}"
                    data-th-classappend="${(page.number + 1) eq i} ? 'active' : ''" >
                    <a class="page-link" th:href="@{/Courses(pageNum=${i} - 1)}" >
                        <span data-th-text="${i}"></span>
                    </a>
                </li>

                <!-- 最后一页与当前页面之差大于3，且当前页面大于4-->

                <li class="page-item disabled" data-th-if="${((page.number + 1) gt 4) && ((page.totalPages - (page.number + 1)) gt 3 )}">
                    <a href="javascript:void(0);" class="page-link">
                        <span aria-hidden="true">...</span>
                    </a>
                </li>
                <li class="page-item" data-th-if="${((page.number + 1) gt 4) && ((page.totalPages - (page.number + 1)) gt 3 )}" >
                    <a th:href="@{/Courses(pageNum=${page.number} - 1)}" class="page-link"  data-th-text="${page.number}"></a>
                </li>
                <li class="page-item active" data-th-if="${((page.number + 1) gt 4) && ((page.totalPages - (page.number + 1)) gt 3 )}">
                    <a th:href="@{/Courses(pageNum=${page.number})}" class="page-link"  data-th-text="${page.number}+1"></a>
                </li>
                <li class="page-item" data-th-if="${((page.number + 1) gt 4) && ((page.totalPages - (page.number + 1)) gt 3 )}">
                    <a th:href="@{/Courses(pageNum=${page.number} + 1)}" class="page-link"  data-th-text="${page.number}+ 2"></a>
                </li>

                <li class="page-item disabled"  data-th-if="${((page.number + 1) gt 4) && ((page.totalPages - (page.number + 1)) gt 3 )}">
                    <a href="javascript:void(0);" class="page-link">
                        <span aria-hidden="true">...</span>
                    </a>
                </li>

                <!-- 最后一页 -->
                <li class="page-item" data-th-classappend="${(page.number + 1) eq page.totalPages} ? 'active' : ''" >
                    <a th:href="@{/Courses(pageNum=${page.totalPages} - 1)}" class="page-link"  data-th-text="${page.totalPages}"></a>
                </li>

                <!-- 下一页 -->
                <li class="page-item" data-th-classappend="${page.last} ? 'disabled' : ''" data-th-if="${page.number} eq ${page.totalPages} -1 ">
                    <a th:href="@{/Courses(pageNum=${page.totalPages} - 1)}" class="page-link" aria-label="Previous">
                        <span aria-hidden="true">»</span>
                    </a>
                </li>

                <li class="page-item" data-th-classappend="${page.last} ? 'disabled' : ''" data-th-if="${page.number} lt ${page.totalPages} -1">
                    <a th:href="@{/Courses(pageNum=${page.number} + 1)}" class="page-link"  aria-label="Next">
                        <span aria-hidden="true">»</span>
                    </a>
                </li>
            </ul>

            <ul class="pagination" data-th-if="${page.totalPages le 7}">
                <!-- 上一页 -->
                <li class="page-item" data-th-classappend="${page.first} ? 'disabled' : ''" data-th-if="${page.number} eq 0 ">
                    <a th:href="@{/Courses(pageNum=0)}" class="page-link" aria-label="Previous">
                        <span aria-hidden="true">«</span>
                    </a>
                </li>

                <li class="page-item" data-th-classappend="${page.first} ? 'disabled' : ''" data-th-if="${page.number} gt 0 ">
                    <a th:href="@{/Courses(pageNum=${page.number - 1})}" class="page-link" aria-label="Previous">
                        <span aria-hidden="true">«</span>
                    </a>
                </li>

                <!-- 迭代生成页码 -->
                <li class="page-item" data-th-each="i : ${#numbers.sequence(1,page.totalPages)}"
                    data-th-classappend="${(page.number + 1) eq i} ? 'active' : ''" >
                    <a class="page-link"  th:href="@{/Courses(pageNum=${i} - 1)}">
                        <span data-th-text="${i}"></span>
                    </a>
                </li>

                <!-- 下一页 -->
                <li class="page-item" data-th-classappend="${page.last} ? 'disabled' : ''" data-th-if="${page.number} eq ${page.totalPages} -1 ">
                    <a th:href="@{/Courses(pageNum=${page.totalPages} - 1)}" class="page-link" aria-label="Previous">
                        <span aria-hidden="true">»</span>
                    </a>
                </li>

                <li class="page-item" data-th-classappend="${page.last} ? 'disabled' : ''" data-th-if="${page.number} lt ${page.totalPages} -1">
                    <a th:href="@{/Courses(pageNum=${page.number} + 1)}" class="page-link"  aria-label="Next">
                        <span aria-hidden="true">»</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>

</div>
</body>
</html>